<template>
	<z-paging ref="paging" class="order-list" v-model="datalist" @query="getOrderList" default-page-size="15">
		<view class="order-list-item" v-for="(item,i) in datalist" :key="i">
			<!-- {{ item.device_status == '1' ? '已启动' : '未启动' }} -->
			<view class="status"></view>
			<view class="orderNo">订单号：{{item.orderid}}</view>
			<view class="orderContent">
				<image src="../../static/images/logo.png" class="image"></image>
				<view class="item-info">
					<view class="t0">{{item.ground.name}}</view>
					<view class="t1">
						<view> 支付方式：</view>
						<view class="center">
							<image src="../../static/images/home/wechat.png" class="t1-image"
								v-if="item.paytype == 'wechat'"></image>
							<view v-if="item.paytype == 'wechat'">微信支付</view>
							<image src="../../static/images/home/pay-icon.png" class="t1-image"
								v-if="item.paytype == 'money'"></image>
							<view v-if="item.paytype == 'money'">余额支付</view>
							<image src="../../static/images/home/free-order.png" class="t1-image"
								v-if="item.paytype == 'free_coupon'"></image>
							<view v-if="item.paytype == 'free_coupon'">免单支付</view>
						</view>
						<view class="price">￥{{item.amount}}</view>
					</view>
					<view class="t2">地点：{{item.ground.city}} {{item.ground.address}}</view>
				</view>
				<!-- <view class="item-right">￥{{item.amount}}</view> -->
			</view>
			<view class="orderDate">下单时间：{{item.createtime}}</view>
		</view>
	</z-paging>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				datalist: []
			}
		},
		methods: {
			/**
			 * 获取余额记录
			 */
			getOrderList(pageNo, pageSize) {
				api.getOrderList({
					page: pageNo,
					limit: pageSize,
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-list {
		background: #F8F8F8;
		padding: 28rpx;

		.order-list-item {
			padding: 24rpx 28rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			border: 2rpx solid #49A1FD;
			position: relative;
			margin: 0 20rpx 20rpx;

			.status {
				background: url('https://oss.bigchun.com/img/user/box_bg.png') no-repeat;
				background-size: 230rpx 60rpx;
				width: 230rpx;
				height: 60rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #49A1FD;
				line-height: 60rpx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
			}

			.orderNo {
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				text-align: left;
				margin-bottom: 16rpx;
			}

			.orderContent {
				display: flex;
				// justify-content: space-between;
				align-items: center;



				.image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					margin-right: 10rpx;
				}



				.item-info {
					margin-left: 20rpx;
					flex: 1;

					.t0 {
						font-weight: 500;
						font-size: 28rpx;
						color: #413100;
						text-align: left;
					}

					.t1 {
						font-size: 24rpx;
						color: #666666;
						line-height: 44rpx;
						display: flex;
						align-items: center;

						.center {
							display: flex;
							align-items: center;
							flex: 1;
						}

						.price {
							font-size: 24rpx;
							color: #F95452;
							align-self: flex-end;
						}

						.t1-image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 20rpx;
						}
					}

					.t2 {
						font-size: 24rpx;
						color: #666666;
						line-height: 44rpx;
						text-align: left;

					}
				}


			}

			.orderDate {
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #666666;
				line-height: 44rpx;
				text-align: left;
			}
		}
	}
</style>